<script src="js/jquery.js"></script>
<script src="js/netgame.js"></script>
<style>
body{
    background:#FAF8EF;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}

#titie-logo:after {
content: "";
display: block;
clear: both;
}
#restart:after {
content: "";
display: block;
clear: both;
}
#gamecontent:after {
content: "";
display: block;
clear: both;
}
h1{
    margin:0;
}
</style>
<div class="row game" style="height:600px">
<div id="opponent" class ="col-md-4" style="margin:0 auto;">
    <h3>可恶的对手 <span id="opponent-user"></span> : <span id="opponent-score">0</span>分</h3> <img id="opponent-img" src="#" width=300 height=300></img>
</div>
<div id="gamepanel" class ="col-md-8" style="margin:0 auto;">
    <div id="titie-logo" style="height:42px">
        <h1 style="margin-top:10px;display: block;float:left;font-size:35px">2048Game 天梯比赛</h1>
        <div style="float:right">
            <div style="display:inline-block;background:#BBADA0;font-size:20px;padding:1px 20px;margin:5px;border-radius:5px">
            <p style="font-size:12px;text-align:center;margin:0;color:#EEE4DA">SCORE</p>
            <p id="score" style="text-align:center;margin:0;color:#F7F4F0">0</p>
            </div>
            <div style="display:inline-block;background:#BBADA0;font-size:20px;padding:1px 15px;margin:5px;border-radius:5px">
            <p style="font-size:12px;text-align:center;margin:0;color:#EEE4DA">BEST</p>
            <p id="bestscore" bestscore="<?= $score?>" style="text-align:center;margin:0;color:#F7F4F0">0</p>
            </div>
        </div>
    </div>
    <div id="restart" style="margin-bottom:10px">
        <div style="margin-top:20px;margin-bottom:20px;">
        <a id="resetgame" home="<?= yii::$app->urlManager->createUrl('site/index')?>" url="<?= yii::$app->urlManager->createUrl('game/netajax')?>" style="float:right;background:#8F7A66;color:#F7F4F0;font-size:20px;"></a>
        </div>
    </div>
    <div id="gamecontent">
        <canvas id="gamecanvas" width=450 height=450></canvas>
    </div>
</div>

</div>

<div id="stopact" class="modal-backdrop fade in" style="opacity: .8;"></div>
<div id="waitbar" class="modal fade in" style="display:block;top:30%">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">正在寻找对手...</h4>
        </div>
        <div class="modal-body">
            <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                <span class="sr-only">100% Complete (success)</span>
            </div>
            </div>
        </div>
    </div>
    </div>
</div>

<div id="winbar" class="modal fade in" style="display:block;top:30%">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">比赛结果</h4>
        </div>
        <div class="modal-body">
            <h1 id="gameEnd"></h1>
            <a class="btn btn-success" style="margin-left:80%;" href="<?php echo yii::$app->urlManager->createUrl('site/index')?>">返回首页</a>
        </div>
    </div>
    </div>
</div>

